<template>
  <div>
    <!-- <Header :sex="ballname" /> -->
    <div style="height:45px;"><head-temp :title='ballname' headType='0'></head-temp></div>
    <div class="title_header">
      第{{ballName}}期
      <span>{{ballTime}}</span> 截止
    </div>
    <div class="first_box">
      <div class="contanier_box">
        <p>
          万位 请至少选择
          <span style="color:#f84848">1</span>个 数字
        </p>
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="handchangeTTOR($event,index)"
            ref="TOOR"
          >{{item}}</li>
        </ul>
      </div>
      <div class="contanier_box">
        <p>
          千位 至少选择
          <span style="color:#f84848">1</span>个 数字
        </p>
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="handchangeTOR($event,index)"
            ref="HOOR"
          >{{item}}</li>
        </ul>
      </div>
      <div class="contanier_box">
        <p>
          百位 至少选择
          <span style="color:#f84848">1</span>个 数字
        </p>
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="handchangeHOR($event,index)"
            ref="DOOR"
          >{{item}}</li>
        </ul>
      </div>

      <div class="contanier_box">
        <p>
          十位 至少选择
          <span style="color:#f84848">1</span>个 数字
        </p>
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="handfourand($event,index)"
            ref="fourand"
          >{{item}}</li>
        </ul>
      </div>

      <div class="contanier_box">
        <p>
          个位 至少选择
          <span style="color:#f84848">1</span>个 数字
        </p>
        <ul>
          <li
            v-for="(item,index) in list"
            :key="index"
            @click="handfiveand($event,index)"
            ref="fiveand"
          >{{item}}</li>
        </ul>
      </div>
    </div>

    <div class="bottom">
      <div class="iconBottom">
        <div>
          <!-- <img src="../../assets/image/copy.png" /> -->
        </div>
        <div class="lajitong">
          <img src="../../assets/image/delateArr.png" @click="handDetlice" />
        </div>
      </div>
      <div class="ListBottom">
        已选
        <span>{{paynum}}</span>注
        <i></i>共
        <span>{{money}}</span>元
      </div>
      <div class="sendBottom" @click="handtwoList">保存</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { Toast } from "vant";
import count from "../../utils/suanfa";
import { getPhone } from "../../api/whole";
Vue.use(axios);
Vue.use(Toast);
import Header from "../../components/changePayHeader";
import headTemp from '@/components/head2'
export default {
  name: "Fucai",
  props: {
    sex: {
      type: Number
    }
  },
  data() {
    return {
      ballname: "排列五",
      list: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      Tenthousand: [], //第二位
      hundred: [], //第三位
      thousand: [], //第一位
      fourand: [], //第四位
      fiveand: [], //第五位
      sixand: [], //第六位
      sevenand: [], //第七位
      arr: [],
      ballName: "",
      ballTime: "",
      timeKeng: [],
      one : 0,
      two : 0,
      three : 0,
      four : 0,
      five : 0,
    };
  },
  components: {
    Header,
    headTemp
  },
  methods: {
    handDetlice() {
      this.thousand.length = 0;
      this.Tenthousand.length = 0;
      this.hundred.length = 0;
      this.fourand.length = 0;
      this.fiveand.length = 0;
      for (var i = 0; i < this.$refs.TOOR.length; i++) {
        this.$refs.TOOR[i].className = " ";
      }

      for (var i = 0; i < this.$refs.HOOR.length; i++) {
        this.$refs.HOOR[i].className = " ";
      }
      for (var i = 0; i < this.$refs.DOOR.length; i++) {
        this.$refs.DOOR[i].className = " ";
      }
      for (var i = 0; i < this.$refs.TOOR.length; i++) {
        this.$refs.TOOR[i].className = " ";
      }
      for (var i = 0; i < this.$refs.fourand.length; i++) {
        this.$refs.fourand[i].className = " ";
      }
      for (var i = 0; i < this.$refs.fiveand.length; i++) {
        this.$refs.fiveand[i].className = " ";
      }
      this.one = 0;
      this.two = 0;
      this.three = 0;
      this.four = 0;
      this.five = 0;
    },
    handtwoList() {
      if (
        this.thousand.length == 0 ||
        this.Tenthousand.length == 0 ||
        this.hundred.length == 0 ||
        this.fourand.length == 0 ||
        this.fiveand.length == 0
      ) {
        Toast("请输入正确数字");
        return;
      }

      var obj = {};
      obj.thousand = this.thousand;
      obj.Tenthousand = this.Tenthousand;
      obj.hundred = this.hundred;
      obj.fourand = this.fourand;
      obj.fiveand = this.fiveand;
      obj.paynum = this.paynum;
      obj.money = this.money;
      this.$store.state.Fiveline.push(obj);

      window.localStorage.setItem(
        "Fiveline",
        JSON.stringify(this.$store.state.Fiveline)
      );

      this.$router.push(
        "/selectball/" +
          this.$route.path
            .split("/")
            .slice(-1)[0]
            .split("=")
            .slice(-1)[0]
      );
    },

    // 第一位
    handchangeTTOR(e, index) {
      if (this.thousand.indexOf(e.target.innerHTML) == "-1") {
        this.thousand.push(e.target.innerHTML);
        this.$refs.TOOR[index].className = "active";
      } else {
        this.$refs.TOOR[index].className = " ";
        for (var i = 0; i < this.thousand.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.thousand[i] == mroeValue) {
            this.thousand.splice(i, 1);
          }
        }
        return;
      }
    },

    //第二位
    handchangeTOR(e, index) {
      if (this.Tenthousand.indexOf(e.target.innerHTML) == "-1") {
        this.Tenthousand.push(e.target.innerHTML);
        this.$refs.HOOR[index].className = "active";
      } else {
        this.$refs.HOOR[index].className = " ";
        for (var i = 0; i < this.Tenthousand.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.Tenthousand[i] == mroeValue) {
            this.Tenthousand.splice(i, 1);
          }
        }
        return;
      }
    },

    //第三位
    handchangeHOR(e, index) {
      if (this.hundred.indexOf(e.target.innerHTML) == "-1") {
        this.hundred.push(e.target.innerHTML);
        this.$refs.DOOR[index].className = "active";
      } else {
        this.$refs.DOOR[index].className = " ";
        for (var i = 0; i < this.hundred.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.hundred[i] == mroeValue) {
            this.hundred.splice(i, 1);
          }
        }
        return;
      }
    },

    // 第四位
    handfourand(e, index) {
      if (this.fourand.indexOf(e.target.innerHTML) == "-1") {
        this.fourand.push(e.target.innerHTML);
        this.$refs.fourand[index].className = "active";
      } else {
        this.$refs.fourand[index].className = " ";
        for (var i = 0; i < this.fourand.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.fourand[i] == mroeValue) {
            this.fourand.splice(i, 1);
          }
        }
        return;
      }
    },
    //第五位
    handfiveand(e, index) {
      if (this.fiveand.indexOf(e.target.innerHTML) == "-1") {
        this.fiveand.push(e.target.innerHTML);
        this.$refs.fiveand[index].className = "active";
      } else {
        this.$refs.fiveand[index].className = " ";
        for (var i = 0; i < this.fiveand.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.fiveand[i] == mroeValue) {
            this.fiveand.splice(i, 1);
          }
        }
        return;
      }
    }
  },
  created() {
    
    getPhone(this.$router.currentRoute.path.split("/")[this.$router.currentRoute.path.split("/").length - 1])
      .then(res => {
        (this.ballName = res.data.periodid),
          (this.timeKeng = res.data.endtime.split(" ")[1].split(":"));
        // 截取狗屁时分秒

        this.ballTime = `${
          res.data.endtime.split(" ")[0]
        } ${(this.timeKeng.splice(-1), this.timeKeng.join(":"))}`;
      });
  },
  computed: {
    paynum: function() {
      this.one = count(this.thousand.length, 1);
      this.two = count(this.Tenthousand.length, 1);
      this.three = count(this.hundred.length, 1);
      this.four = count(this.fourand.length, 1);
      this.five = count(this.fiveand.length, 1);

      return this.one * this.two * this.three * this.four * this.five;
    },

    money: function() {
      return this.paynum * 2;
    }
  }
};
</script>

<style scoped>
.lajitong {
  height: 100%;
  display: flex;
  align-items: center;
}
.title_header {
  border-top: 1px solid #e4e4e4;
  position: absolute;
  line-height: 0.4rem;
  z-index: 1;
  width: 100%;
  height: 0.4rem;
  background: #ffffff;
  font-size: 12px;
  text-indent: 0.15rem;
  color: #999999;
}
.title_header span {
  color: #f84948;
}
.first_box {
  padding-bottom: 0.4rem;
  margin-top: 0.4rem;
  width: 100%;
  height: 100%;
  background: #f2f2f6;
  box-sizing: border-box;
}

.active {
  color: #fff !important;
  background: #f84848 !important;
  border: 0.01rem solid #f84848 !important;
}
.contanier_box {
  padding: 0.1rem 0;
}
.contanier_box p {
  line-height: 0.2rem;
  text-indent: 0.35rem;
  font-size: 0.12rem;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  position: relative;
}
.contanier_box p::before {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  background: #f25149;
  border-radius: 50%;
  position: absolute;
  left: 0.15rem;
  top: 0.03rem;
}
.contanier_box ul {
  display: flex;
  flex-wrap: wrap;
}
.contanier_box ul li {
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0.16rem;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  color: #f84848;
  line-height: 0.4rem;
  text-align: center;
  margin: 0.08rem;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  display: flex;
  background: #fff;
}
.iconBottom {
  display: flex;
  width: 25%;
  align-items: center;
  justify-content: center;
}
.ListBottom {
  display: flex;
  align-items: center;
  font-size: 0.12rem;
  color: #a3a3a3;
  width: 40%;
}

.ListBottom i {
  width: 0.05rem;
}
.ListBottom span {
  color: #f84848;
  margin: 0 0.025rem;
  display: flex;
}
.sendBottom {
  display: flex;
  align-items: center;
  font-size: 15px;
  width: 35%;
  color: #ffffff;
  justify-content: center;
  background: #f84848;
}
</style>